<!--
 * @Author: Junxu
 * @Date: 2024-04-01 16:30:38
 * @LastEditors: Junxu
 * @LastEditTime: 2024-04-08 11:35:24
 * @Description: 通知详情
-->
<template>
  <scroll-view :style="{ backgroundColor: errorStatus > 0 ? '#ffffff' : '#f3f6f8' }" :scroll-y="true">
    <view class="notice" v-if="!loading">

      <!-- S-通知详情 -->
      <view v-if="errorStatus == 0">
        <view class="notice-header">
          <view class="notice-title">{{ info.title }}</view>
          <view class="notice-info">
            <image src="../../static/images/maintain/times.png" mode=""></image>
            <view>{{ info.createTime }}</view>
            <view>{{ info.sendName }}</view>
          </view>
        </view>
        <view class="notice-main">
          <rich-text :nodes="info.content"></rich-text>
        </view>
      </view>
      <!-- E-通知详情 -->

      <!-- S-暂无数据 -->
      <view class="empty" v-else>
        <image src="../../static/images/index/empty1.png" mode=""></image>
        {{ errorMsg[errorStatus] }}
      </view>
      <!-- E-暂无数据 -->

      <view class="bottom-btn-box" v-if="errorStatus > 0">
        <view class="bottom-btn"><button type="default" class="home-btn" @click.native="toIndex">返回梯无忧主页</button></view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import parseHtml from '@/utils/html-parser.js';
import { getUserNoticeDetail } from '@/apis/notice.js';
import { hanleToken } from '@/utils/utils.js';

export default {
	name: 'NoticeDetail',
	data() {
		return {
			loading: false,
			id: '',
			info: {
				id: '',
				content: '',
				title: '',
				createTime: '',
				sendName: '',
				status: '',
				isDeleted: ''
			},
			errorStatus: 0,
			errorMsg: {
				1: '您无权查看该通知',
				2: '该通知已删除',
			}
		};
	},
	onLoad(options) {
		console.log(options, 'options');
		const { id } = options;
		this.id = id;
		let token = hanleToken('get', 'token') || '';
		if (!token) {
			uni.showModal({
				title: '提示',
				content: '检测到您未登录或登录已失效，请前往登录后在操作',
				showCancel: false,
				success: () => {
					uni.navigateTo({
						url: '../login/index',
					});
				},
			});
			return;
		}
		this.getDetail();
	},
	created() {
		console.log(this.content, 'content');
	},
	methods: {
		// 查询通知列表未读数量
		async getDetail() {
			this.loading = true;
			uni.showLoading({
				title: '加载中'
			});
			try {
				const res = await getUserNoticeDetail({ noticeId: this.id });
				console.log(res, 'res');
				if (res && res.code == 200) {
					if (res.data) {
						this.info = {
							...res.data,
							content: parseHtml(this.formatRichText(res.data.content))
						};
						this.errorStatus = res.data.isDeleted == 1 ? 2 : 0;
					} else {
						this.errorStatus = 2;
					}
				} else if (res && res.code == 400) {
					this.errorStatus = 1;
				}
				this.loading = false;
				uni.hideLoading();
			} catch (error) {
				this.errorStatus = 1;
				this.loading = false;
				uni.hideLoading();
				console.log(error);
			}
		},
		/**
        * 处理富文本里的图片宽度自适应
        * 1.去掉img标签里的style、width、height属性
        * 2.img标签添加style属性：max-width:100%;height:auto
        * 3.修改所有style里的width属性为max-width:100%
        * 4.去掉<br/>标签
        * @param html
        * @returns {void|string|*}
        */
		// 控制小程序中图片大小
		formatRichText(html) { 
			let newContent = html.replace(/<img[^>]*>/gi, function (match) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function (match) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
					'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			// eslint-disable-next-line no-useless-escape
			newContent = newContent.replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		},
		toIndex() {
			uni.navigateTo({
				url: '/pages/home/index'
			});
		}
	}
};
</script>

<style scoped lang="scss">
scroll-view{
  height: 100vh;
}
.notice {
  padding: 30rpx;

  &-title {
    color: #333333;
    font-size: 42rpx;
  }

  &-info {
    padding: 16rpx 0;
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 24rpx;

    &>image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 10rpx;
    }

    &>view {
      margin-right: 20rpx;
    }
  }

  &-main {
    padding: 16rpx 0;
    font-size: 28rpx;
  }
}

.rich-text-content p {
  margin: 20rpx 0;
}

.bottom-btn-box {
  width: 100%;
  height: 100rpx;

  .bottom-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eeeeee;
    padding: 0 14rpx;
    box-sizing: border-box;
    z-index: 2;

    .home-btn {
      flex: 1;
      width: 0;
      height: 75rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #0091FF;
      border-radius: 4px;
      color: #FFFFFF;
    }
  }
}

.empty {
  display: flex;
  justify-content: center;
  width: 100%;

  image {
    width: 64rpx;
    height: 64rpx;
    margin-bottom: 20rpx;
  }

  color: #999;
  flex-direction: column;
  align-items: center;
  padding-top: 300rpx;
  font-size: 24rpx;
}
</style>